import { ProTable, ProTableProps } from "@ant-design/pro-components";
import type { ParamsType } from "@ant-design/pro-provider";
import "antd/lib/table/style";
import "antd/lib/typography/style";
import React, { useEffect, useState } from "react";
import CustomBlockquote from "../Blockquote";
import "./index.less";
import { useTableScroll } from "@/hooks/useTableScroll";

// 修改CustomerTable定义，添加泛型T
const CustomerTable = <T extends Record<string, any>, U extends ParamsType = ParamsType, ValueType = "text">(
	props: ProTableProps<T, U, ValueType>
) => {
	const { headerTitle, ...restProps } = props;
	const tableSrcollHeight = useTableScroll({ extraHeight: 300 });
	// const getTableScrollY = (params: { extraHeight?: number; id?: string }) => {
	// 	let extraHeight = params?.extraHeight ?? 0;
	// 	let tHeader = null;
	// 	if (params?.id) {
	// 		const { id } = params;
	// 		tHeader = document.getElementById(id)?.getElementsByClassName("hov-table-thead")[0] ?? null;
	// 	} else {
	// 		tHeader = document.getElementsByClassName("hov-table-thead")[0];
	// 	}
	// 	// console.log(tHeader.getBoundingClientRect());

	// 	let tHeaderBottom = tHeader ? tHeader.getBoundingClientRect().bottom : 0;
	// 	let height = `calc(100vh - ${Math.floor(tHeaderBottom + extraHeight)}px)`;
	// 	// console.log(height);
	// 	return height;
	// };

	// const [scrollY, setScrollY] = useState<string | number>(0);

	// useEffect(() => {
	// 	const calcScrollY = getTableScrollY({ extraHeight: 0 });
	// 	setScrollY(calcScrollY);
	// }, []);

	return (
		<ProTable<T, U, ValueType>
			headerTitle={
				props?.headerTitle ? (
					typeof props.headerTitle === "string" ? (
						<CustomBlockquote>{props.headerTitle}</CustomBlockquote>
					) : (
						props.headerTitle
					)
				) : undefined
			}
			// columnsState={{
			// 	// @ts-ignore
			// 	persistenceKey: props?.key ? props?.key : "DEFAULT_" + "table",
			// 	persistenceType: "localStorage",
			// 	onChange(value) {
			// 		console.log("value: ", value);
			// 	}
			// }}
			// size={props.size ? props?.size : "small"}
			className={props.className ?? "cTable"}
			tableStyle={props.tableStyle ?? { height: "calc(100vh - 180px)" }}
			scroll={props.scroll ?? { y: tableSrcollHeight, x: 1000 }}
			{...restProps}
		/>
	);
};

export default CustomerTable;
